<template>
  <div class="personal">
    <div class="body">
      <div class="body-content">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <img :src="message.avatar" alt="" class="btm-avatar">
            <div>
              <h2>{{message.nickname}}</h2>
              <span>账号：{{message.account}}</span>
                <!-- 复制 -->
              <i class="iconfont icon-fuzhi" @click="toCopy(message.account)"></i>
            </div>
            <span @click="updateUser(message.user_id)" class="shou">编辑资料</span>
          </div>
          <div class="bt-mes">
            <p>{{message.Introduction}}</p>
            <div class="bt-tag shou">
              <div class="bts-age"  @click="updateUser(message.user_id)">
                <!-- 男 -->
                <img src="/static/img/tubiao/boy.png" alt="" v-show="message.sex=='男'">
                <!-- 女 -->
                <img src="/boke/boke/static/img/tubiao/girl.png" alt="" v-show="message.sex=='女'">
                <span>{{teacherAge}}岁</span>
              </div>
              <div  @click="updateUser(message.user_id)">
                <span class="bts-district shou">{{message.district}}</span>
              </div>
              <div  @click="updateUser(message.user_id)">
                <span class="bts-school shou">{{message.school}}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  inject:['reload'],//注入App里的reload方法
  data(){
    return {
      message:{},
      teacherAge:0,
    }
  },
  mounted(){
    this.selPer();
  },
  methods:{
    async selPer(){
      // console.log("个人中心");
      var variate = this.$route.query.id;
      const {data:res} = await this.$http.post("selPersonal",{variate});
      if(res.status != 200){
        this.$message.error('查询失败');
      }else{
        console.log(res);

        // console.log(this.message.birthday);
         let birthdays = res.message[0].birthday.split("T")[0];
        //  console.log(birthdays);
         this.getAge(birthdays)
        //  this.formatString(this.message.avatar);
         this.message = res.message[0];
        //  this.message.avatar = this.message.avatar.replace(/\s+|&nbsp;/ig, '+')
        //  this.message.avatar = "http://127.0.0.1:3000/images/a/a1.jpg"
        //  let img = 'data:image/jpeg;base64,'+this.message.avatar;
        //  this.message.avatar = img.replace(" ","+");
        //  this.message.avatar = this.base64ImgtoFile(this.message.avatar);;
        // console.log('data:image/jpeg;base64,'+this.message.avatar);
        //  console.log(this.getAge(birthdays));
      }
    },
    //去除字符串中的空格和换行
  formatString(value) {
    if (value == null || value == "" || value == undefined) {
      return "";
    } else {
      var str = value.replace(/\ +/g, "");
      str = str.replace(/[\r\n]/g, "");
      return str;
    }
  },
    updateUser(id){
      // console.log(id);
      this.$router.push({path:"/personalTabbar/updateMes",query:{id}});
    },
    toCopy(account){
      this.$message({
        message: '已复制',
        type: 'success'
      });
      document.execCommand("Copy");
      console.log(document.execCommand("Copy"));
      // console.log(account);
    },

    //判断用户的年龄
    getAge(birth){
      let birthdays = birth.split("-")
      // console.log("这里是计算年龄");
      // console.log(birthdays);
      let d = new Date();
      console.log(d);
      let age = d.getFullYear() - birthdays[0] - ((d.getMonth()+1) < birthdays[1] || ((d.getMonth()+1)  == birthdays[1] && d.getDate() < birthdays[2]) ? 1 : 0);
      // console.log(age);
      this.teacherAge = age;
    },

  }
}
</script>
<style scoped>
@import url('./css/person.css');
</style>
